<template>
  <div id="app">
    <div class="login-form">
      <!--
        layui-container：容器，增加左右padding
        layui-form-pane：表单内每个item的方框风格-->
      <div class="layui-container">
        <form class="layui-form layui-form-pane" action="">
          <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="title"
                required
                lay-verify="required"
                placeholder="请输入同户名/邮箱/手机号"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
              <input
                type="password"
                name="password"
                required
                lay-verify="required"
                placeholder="请输入密码"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-inline">
              <input
                type="text"
                name="code"
                required
                lay-verify="required"
                placeholder="请输入验证码"
                autocomplete="off"
                class="layui-input"
              />
            </div>
            <div class="captchaCode layui-form-mid">
              <img @click="getCaptchaCode" id="captchaCode" alt="验证码"/>
            </div>
          </div>
          <button type="button" class="layui-btn">点击登录</button>
          <a class="forget-btn" href="http://www.layui.com">忘记密码</a>
        </form>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "App",
    data() {
      return {
        captcha: "",
      };
    },
    mounted() {
      this.getCaptchaCode();
      this.getMemberList();
    },
    methods: {
      getCaptchaCode() {
        //this.$axios.get(process.env.VUE_APP_SERVER+'/member/getCaptcha')
        $("#captchaCode").attr(
          "src",
          process.env.VUE_APP_SERVER + "/system/member/getList"
        );
      },
      getMemberList() {
        this.$axios
          .get(process.env.VUE_APP_SERVER + "/system/member/getList")
          .then((response) => {
            let resp = response.data;
            console.log("获取到的会员列表：", resp);
          });
      },
    },
  };
</script>
<style lang="scss" scoped>
  body {
    margin: 0;
    padding: 0;
    height: 100%;
  }

  #app {
    background: #f2f2f2;
  }

  .layui-container {
    background: #fff;
  }

  input {
    max-width: 300px;
    min-width: 200px;
  }

  .forget-btn {
    margin-left: 10px;
    font-weight: 500;
    //sass伪类操作，覆盖效果
    &:hover {
      color: #009688;
    }
  }

  .captchaCode {
    margin-left: 5px;
  }
</style>
